<template>
  <div class="home">
    <keep-alive>
      <component :is="roleBasedComponent" />
    </keep-alive>
  </div>
</template>

<script setup lang="ts">
import useUserStore from '@/store/modules/user';
import { RoleStrategyFactory, RoleEnum } from './homePages';

const userStore = useUserStore();
const roleBasedComponent = ref(null);




watch(() => userStore.curRoleId, async (roleId) => {

  const strategy = RoleStrategyFactory.create(roleId as RoleEnum);
  if (strategy) {
    const component = await strategy.getHomeComponent();
    // const component = import.meta.glob("./homePages/modules/PlatformStrategy.vue");
    // console.log(  component)
    for(const p in component){
      component[p]().then((mod:any)=>{
        roleBasedComponent.value = mod.default;
      })
    }

    // roleBasedComponent.value = component;


  } else {
    console.error('未找到对应角色的首页渲染策略');
  }
},
{
  immediate: true
}
)



onMounted(async () => {
});
</script>

<style>
.home {
  height: calc(100vh - 89px - 10px);
  overflow-y: auto;
}
</style>
